import React from 'react';
import { connect } from 'dva';
import { Form, Input, Modal, Radio } from 'antd';

const FormItem = Form.Item;

@Form.create()
@connect(({ gmvConf, loading }) => ({
  gmvConf,
  loading: loading.models.gmvConf,
}))
class ReissueCouponForm extends React.Component {
  static defaultProps = {
    modalVisible: false,
    handleOpt: () => {},
    handleModalVisible: () => {},
  };

  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  okHandle = () => {
    const { form, handleOpt } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleOpt({
        ...fieldsValue,
      });
    });
  };

  render() {
    const { modalVisible, handleModalVisible, values, form } = this.props;
    return (
      <Modal
        destroyOnClose
        maskClosable={false}
        width={440}
        style={{ top: 20 }}
        bodyStyle={{ padding: '10px 40px' }}
        title="补发券"
        visible={modalVisible}
        onCancel={() => handleModalVisible(false, values)}
        onOk={this.okHandle}
      >
        <div>
          <FormItem key="cityId" {...this.formLayout} label="城市ID">
            {form.getFieldDecorator('cityId', {
              rules: [{ required: true, message: '请输入城市ID！' }],
            })(<Input style={{ width: '100%' }} placeholder="请输入" />)}
          </FormItem>

          <FormItem key="warehouseId" {...this.formLayout} label="仓库ID">
            {form.getFieldDecorator('warehouseId', {
              rules: [{ required: true, message: '请输入' }],
            })(<Input style={{ width: '100%' }} placeholder="请输入" />)}
          </FormItem>
          <FormItem key="couponType" {...this.formLayout} label="类型">
            {form.getFieldDecorator('couponType', {
              initialValue: 1,
              rules: [{ required: true, message: '请输入' }],
            })(
              <Radio.Group>
                <Radio.Button value={1}>单品券</Radio.Button>
                <Radio.Button value={2}>组合券</Radio.Button>
              </Radio.Group>
            )}
          </FormItem>
        </div>
      </Modal>
    );
  }
}

export default ReissueCouponForm;
